<template>
	<div class="login-container">
		<el-card class="box-card">
			<div class="login-body">
				<div class="login-title" @click="toIndex">
					<img src="../../../image/logo.jpg" style="width:260px">
				</div>
				<el-form ref="form" :model="userForm">
					<el-input placeholder="请输入账号..." v-model="userForm.accountNumber" class="login-input">
						<template slot="prepend">
							<div class="el-icon-user-solid"></div>
						</template>
					</el-input>
					<el-input placeholder="请输入密码..." v-model="userForm.userPassword" class="login-input"
						@keyup.enter.native="login" show-password>
						<template slot="prepend">
							<div class="el-icon-lock"></div>
						</template>
					</el-input>
					<div class="login-submit">
						<el-button type="primary" @click="login">登录</el-button>
						<el-button type="warning" autocomplete="off" @click="$router.push('/sign-in')"
							style="margin-left: 20px">注册</el-button>
					</div>
					<div class="other-submit">

						<router-link to="/login-admin" class="sign-in-text">管理员登录</router-link>
					</div>

				</el-form>
			</div>
		</el-card>
	</div>
</template>

<script>
	import helper from './js/base.js'
	export default {
		name: "login",
		data() {
			return {
				userForm: {
					accountNumber: '',
					userPassword: ''
				}
			};
		},

		methods: {
			login() {
				this.$api.userLogin({
					accountNumber: this.userForm.accountNumber,
					userPassword: this.userForm.userPassword
				}).then(res => {
					console.log(res);
					// console.log(res.data.accountNumber)
					if (res.status_code === 1) {
						res.data.signInTime = res.data.signInTime.substring(0, 10);
						this.$globalData.userInfo = res.data;
						helper.websiteUrl = res.data.accountNumber
						console.log(helper.websiteUrl)
						this.$router.replace({
							path: '/index'
						});
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			toIndex() {
				this.$router.replace({
					path: '/index'
				});
			}
		}
	}
</script>

<style scoped>
	.login-container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		width: 100%;
		background-image: url('../../../image/backgroud.jpg');
		/* 指定背景图片的URL */
		background-size: cover;
		/* 图片覆盖整个容器 */


	}

	.login-body {
		padding: 30px;
		width: 300px;
		height: 100%;

	}

	.login-title {
		padding-bottom: 30px;
		text-align: center;
		font-weight: 600;
		font-size: 20px;
		color: #409EFF;
		cursor: pointer;
	}

	.login-input {
		margin-bottom: 20px;
	}

	.login-submit {
		margin-top: 20px;
		display: flex;
		justify-content: center;
	}

	.sign-in-container {
		padding: 0 10px;
	}

	.sign-in-text {
		color: #409EFF;
		font-size: 16px;
		text-decoration: none;
		line-height: 28px;
	}

	.other-submit {
		display: flex;
		justify-content: space-between;
		margin-top: 30px;
		margin-left: 200px;
	}
</style>